<template>
  <div class="container">
    <MySearch :father-value="value" v-model="value"></MySearch>
    <div class="line"></div>

    <van-swipe class="swipe-box" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <van-grid :column-num="5" class="grid-box" :border="false">
      <van-grid-item
        v-for="value in 10"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>

    <div class="random">
      <span class="text" @click="changeSubjects"> 随机换一批热门话题 </span>
    </div>

    <div class="subjects">
      <div class="subjects-wrap">
        <div
          class="item"
          v-for="(item, index) in subjects"
          :key="index"
          :style="{ 'background-color': item.bgcolor }"
        >
          {{ item.title }}
        </div>
      </div>
    </div>

    <NewsItem :news="news" key="news"></NewsItem>
  </div>
</template>

<script>
import { Search, Swipe, SwipeItem, Grid, GridItem } from "vant";
import MySearch from "@/components/Search.vue";
import NewsItem from "@/components/NewsItem.vue";

import { requestSubjects, requestNews } from "@/http";

import { mockSubjects, mockNews } from "../../mock/data.js";
export default {
  name: "Home",
  data() {
    return {
      value: "父组件传递的value",
      subjects: [],
      news: []
    };
  },
  mounted() {
    this.getSubjects();
    this.getNews()
  },
  methods: {
    // 切换随机话题 直接前端mock
    changeSubjects() {
      const data = mockSubjects();
      this.subjects = data;
    },
    // 模拟axios请求获取10个随机话题
    getSubjects() {
      requestSubjects().then((res) => {
        this.subjects = res.detail;
      });
    },
    getNews(){
      requestNews().then(res=>{
        console.log(res)
        this.news = res.detail
      })
    }
  },
  components: {
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    MySearch,
    NewsItem
  },
};
</script>

<style scoped>
.line {
  margin-top: 8px;
  margin-bottom: 8px;
  width: 100%;
  height: 1px;
  background-color: #f8f9f9;
}
.swipe-box {
  border-radius: 10px;
}
.swipe-box .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.random {
  margin-top: 12px;
  text-align: right;
  color: #ababac;
  font-size: 14px;
}
.subjects {
  margin-top: 10px;
  overflow: hidden;
}

.subjects .subjects-wrap {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  justify-content: space-between;
  align-items: center;
}

.subjects .item {
  flex-basis: 172.5px;
  flex-shrink: 0;
  height: 70px;
  line-height: 70px;
  font-size: 24px;
  background-color: #2e8b57;
  margin-right: 10px;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
}
</style>
